<template>
  <div class="sdata">
    <p>销售记录</p>
    <ul class="title">
      <li>单号</li>
      <li>用户</li>
      <li>时间</li>
      <li>支付方式</li>
      <li>支付金额</li>
    </ul>
    <div class="scroll">
      <ul class="spay">
        <!-- <li v-for="item in arre" :key="item">
          <span>{{ data.data.goodsNum }}</span>
          <span>{{ user }}</span>
          <span>{{ time }}</span>
          <span>{{ pay }}</span>
          <span>{{ payMoney }}</span>
          <span>{{ item.Id }}9</span>
        </li> -->

        <li v-for="item in arr" :key="item.Id">
          <span>{{ item.goodsNum }}</span>
          <span>{{ item.telephone }}</span>
          <span>{{ item.Stime }}</span>
          <span>{{ item.goodsPay }}</span>
          <span>{{ item.goodsSale }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import service from "../moke/salePay";
import { onMounted, ref } from "vue";
// import { log } from "console";
export default {
  computed: {},
  setup(props, context) {
    let arr = ref([]);
    let snum = ref([]);
    onMounted(async () => {
      const res = await service.getData();

      // return res;
      // console.log(res.data);
      arr.value = res.data.data;
      console.log(arr.value);
      snum.value = arr.value.reduce((sum, e) => sum + e.goodsSale, 0);
      console.log(snum.value);
      context.emit("sm", snum.value);
    });
    // onMounted(() => {
    //   setTimeout(async () => {
    //     const res = await service.delete(3);
    //     console.log(res);
    //   }, 5000);
    // });
    return {
      arr,
    };
  },
  data() {
    return {
      // OddNumbers: [],
      // user: [],
      // time: [],
      // pay: [],
      // payMoney: [],
    };
  },
};
</script>

<style lang="less" scoped>
.sdata {
  p {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    background: #00adff;
    li {
      width: 110px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      color: #fff;
    }
  }
  .scroll {
    width: 100%;
    height: 340px;
    overflow: hidden;
    .spay {
      width: 100%;
      height: 500px;
      overflow: auto;
      li {
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: space-between;

        span {
          display: inline-block;
          width: 110px;
          height: 20px;
          font-size: 9px;
          color: #000;
          text-align: center;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
